<!DOCTYPE html>
<html>
  <head>
    <title>s04.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
	<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		function f1(){
			$('#d1 div').css('font-size','10px');
		}
		
		function f2(){
			//只查找子节点，不找非子节点
			//只找到d2,d3,d5.但是d4继承了d3，也会改变
			$('#d1>div').css('font-size','30px');
		}
		
		function f3(){
			//+表示下一个兄弟
			$('d3+div').css('font-size','50px');
			//不会有改变，p标记不是d3的兄弟节点
			$('#d3+p').css('font-size','50px');
		}
		
		function f4(){
			//~下面所有兄弟
			$('#d2+p').css('font-size','40px');
		}
	</script>
  </head>
  
  <body>
    <!-- jQuery层次选择器 -->
    <!-- select1空格select2 -->
    <!-- select1>select2 -->
    <!-- select1+select2 -->
    <!-- select1~select2 -->
    
    <div id="d1">
    	<div id="d2">Hello Java</div>
    	<div id="d3">
    		<div id="d4" style="font-size: 40px">Hello Servlet</div>
    	</div>
    	<div id="d5">Hello Ajax</div>
    	<p>Hello jQuery</p>
    </div>
    
    <a href="javascript:;" onclick="f4()">层次选择器</a>
  </body>
</html>
